/** @jsxImportSource @emotion/react */
import { jsx } from "@emotion/react";
import * as React from "react";
import {Button, ButtonProps, ButtonRefComp, ButtonSize, getHeight} from "./Button";
// import {VisuallyHidden} from "@reach/visually-hidden";
import * as VisuallyHidden from '@radix-ui/react-visually-hidden';
import PropTypes from "prop-types";
import { IconWrapper } from "./IconWrapper";
import { IconX } from "./Icons";
import { useTheme } from "./Theme/Providers";


export interface IconButtonProps extends Partial<ButtonProps> {
  /** A label required for accessibility  */
  label: string;
  /** The name of the icon you wish to render */
  icon?: React.ReactNode;
  /** Change the colour */
  color?: string;
  children?: React.ReactNode;
}

/**
 * A component which composes Button and Icon to provide
 * interactive icon elements.
 */
export const IconButton =(
    {
      label,
      size = "md" as ButtonSize,
      icon,
      onPress,
      color = "currentColor",
      ...other
    }: IconButtonProps
  ) => {
    const theme = useTheme();
    return (
      <Button
        size={size}
        css={{
          padding: 0,
          [theme.mediaQueries.sm]: {
            padding: 0,
          },
          [theme.mediaQueries.lg]: {
            padding: 0,    //底层Button有设置[theme.xx.lg],这里就也得加[theme.xx.lg]，不然会被无情颠覆。优先级毛病？
          },
          width: getHeight(size)
        }}
        onPress={onPress}
        {...other}
      >
        <VisuallyHidden.Root>{label}</VisuallyHidden.Root>
        <IconWrapper color={color} size={size}>
          {icon}
        </IconWrapper>
      </Button>
    );
  };


/**
 * 旧版本 可传递 ref
 * //无法自动推断onPress(e:)类型 Parameter 'e' implicitly has an 'any' type ; onPress:(e: any)=>{e!.};
 * 必须加上:  : RReact.FunctionComponent<IconButtonProps> =  定义体才行啊。
 */

export const IconRefButton =
    ({
            label,
            size = "md" as ButtonSize,
            icon,
            onPress,
            color = "currentColor",
            ref,
            ...other
        }: IconButtonProps,
    ) => {
        const theme = useTheme();
        return (
            <ButtonRefComp
                ref={ref}
                size={size}
                css={{
                    padding: 0,
                    [theme.mediaQueries.sm]: {
                        padding: 0,
                    },
                    [theme.mediaQueries.lg]: {
                        padding: 0,    //底层Button有设置[theme.xx.lg],这里就也得加[theme.xx.lg]，不然会被无情颠覆。优先级毛病？
                    },
                    width: getHeight(size)
                }}
                onPress={onPress}
                {...other}
            >
                <VisuallyHidden.Root>{label}</VisuallyHidden.Root>
                <IconWrapper color={color} size={size}>
                    {icon}
                </IconWrapper>
            </ButtonRefComp>
        );
    };


IconButton.displayName = "IconButton";

// IconButton.propTypes = {
//   icon: PropTypes.node.isRequired,
//   color: PropTypes.string,
//   label: PropTypes.string.isRequired,
//   variant: PropTypes.oneOf(["outline", "default", "ghost"]),
//   size: PropTypes.oneOf(["xs", "sm", "md", "lg", "xl"])
// };


// IconRefButton.displayName = "IconRefButton";

// IconRefButton.propTypes = {
//     onPress: PropTypes.func,
//     icon: PropTypes.node.isRequired,
//     color: PropTypes.string,
//     label: PropTypes.string.isRequired,
//     variant: PropTypes.oneOf(["outline", "default", "ghost"]),
//     size: PropTypes.oneOf(["xs", "sm", "md", "lg", "xl"])
// };


interface CloseButtonProps extends Partial<ButtonProps> {
  /** An optional label for the close button */
  label?: string;
  /** Change the colour */
  color?: string;
}

export const CloseButton = ({
  label = "Close",
  ...other
}:CloseButtonProps) => {
  return (
    <IconButton variant="ghost" label={label} icon={<IconX />} {...other} />
  );
};

CloseButton.propTypes = {
  label: PropTypes.string,
  color: PropTypes.string,
  variant: PropTypes.oneOf(["outline", "default", "ghost"]),
  size: PropTypes.oneOf(["xs", "sm", "md", "lg", "xl"])
};
